<template>
	<el-card class="cart" shadow="always" :body-style="{ padding: '20px' }">
		<div slot="header">
			<span>注册界面</span>
		</div>
		<!-- card body -->
		<el-form
			:model="user"
			ref="registerForm"
			:rules="rules"
			label-width="100px"
		>
			<el-form-item label="用户名:" prop="username">
				<el-input v-model="user.username"></el-input>
			</el-form-item>

			<el-form-item label="密码:" prop="password">
				<el-input v-model="user.password"></el-input>
			</el-form-item>

			<el-form-item label="昵称:">
				<el-input v-model="user.nick"></el-input>
			</el-form-item>

			<el-form-item label="头像">
				<el-upload
					name="headerimg"
					ref="uploadHeader"
					action="/"
					:auto-upload="false"
					list-type="picture-card"
					:show-file-list="false"
					:before-upload="beforeAvatarUpload"
					:on-change="onChangeFile"
				>
					<img v-if="imageUrl" :src="imageUrl" class="avatar" />
					<i v-else class="el-icon-plus"></i>
				</el-upload>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="onSubmit">注册</el-button>
				<el-button @click="onBackLogin">返回登录</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
import { requestAddMy } from "@/api/My";
import Sha256 from 'js-sha256'
export default {
	data() {
		return {
			user: {
				username: '',
				password: '',
				nick: '',
			},
            headerimg: null,
			imageUrl: '', //预览图片
			rules: {
				username: {
					required: true,
					message: '请输入用户名称',
					trigger: 'blur'
				},
				password: {
					required: true,
					message: '请输入密码',
					trigger: 'blur'
				}
			}
		}
	},
	methods: {
		/**
		 * 注册提交
		 */
		onSubmit() {
			this.$refs.registerForm.validate(validate => {
				if (validate) {
                    let formData = new FormData()
                    formData.append('username',this.user.username)
                    formData.append('password',Sha256(this.user.password))
                    formData.append('nick',this.user.nick)
                    formData.append('headerimg',this.headerimg)
					
					requestAddMy(formData).then(data=>{
                        let {resultCode,resultInfo} = data
                        if(resultCode === 1){
                            this.$message({
                                type:'success',
                                message:'注册成功!'
                            })
                        }else{
                            this.$message({
                                type:'error',
                                message:'注册失败!'+resultInfo
                            })
                        }
                    })
				}
			})
		},
		/**
		 * 返回登录界面
		 */
		onBackLogin() {
			this.$router.replace({ path: '/' })
		},
		/**
		 * 头像上传前
		 *  图片格式 大小检查
		 */
		beforeAvatarUpload(file) {
			console.log('beforeAvatarUpload >>> ', file)
			const isJPG = file.type === 'image/jpeg'
			const isLt2M = file.size / 1024 / 1024 < 2

			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!')
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!')
			}
			return isJPG && isLt2M
		},
		/**
		 * 选中本地图片触发
		 */
		onChangeFile(file) {
			console.log('file', file)
            this.headerimg = file.raw
			this.imageUrl = URL.createObjectURL(file.raw)
		}
	}
}
</script>

<style lang="scss" scoped>
.cart {
	width: 500px;
	margin: 100px auto;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>